<template>
    <div v-clickOutSide="handleHideSelect">
        <a-dropdown :trigger="['click']" :visible="visible" :class="visible ? 'active' : ''" :getPopupContainer="(node) => node.parentNode">
            <flexbox class="ant-dropdown-link dropdown-wrap" @click="handleVisible">
                <!-- 用click控制显示，是因为需要点击范围之外隐藏 -->
                <a-input-search v-bind="bindValues" v-model:value="text" @search="handleInputChange" />
            </flexbox>
            <template #overlay>
                <div class="dropdown-body" v-if="!text" v-empty="!isEmpty">
                    <flexbox justify="flex-end" style="padding: 0px 12px 0 12px" v-if="searchHistoryRecord.length">
                        <a @click.stop="handleClearHistory">清空历史记录</a>
                    </flexbox>
                    <div class="item" v-for="item of searchHistoryRecord" :key="item.id" @click.stop="handleSelectHistoryRecord(item)">
                        {{ item.name }}
                    </div>
                </div>
            </template>
        </a-dropdown>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    props: {
        suggestOptions: {
            type: Array,
            default: []
        },
        value: {
            type: String,
            default: ''
        },
        size: {
            type: String,
            default: 'small'
        }
    },
    emits: ['update:value', 'change'],
    setup(props, { emit, attrs }) {
        const state = reactive<any>({
            text: '',
            visible: false,
            isEmpty: false
        });
        const bindValues = computed(() => {
            return {
                size: props.size,
                ...attrs
            };
        });
        const searchHistoryRecord = computed(() => {
            state.isEmpty = !store.getters.searchHistoryRecord.length;
            return store.getters.searchHistoryRecord;
        });
        const handleVisible = () => {
            state.visible = !state.visible;
        };
        const handleHideSelect = () => {
            state.visible = false;
        };
        // 清空历史记录
        const handleClearHistory = () => {
            store.dispatch('user/DeleteAllSearchHistoryRecord');
        };
        // 选择某一条记录
        const handleSelectHistoryRecord = (item) => {
            state.text = item.name;
            handleInputChange();
        };
        const handleInputChange = () => {
            emit('update:value', state.text);
            emit('change', state.text);
        };
        //获取用户搜索历史
        store.dispatch('user/GetSearchHistoryRecord');

        watch(
            () => props.value,
            (n) => {
                if (!n) {
                    state.text = '';
                }
            }
        );

        return {
            ...toRefs(state),
            handleVisible,
            handleHideSelect,
            handleClearHistory,
            handleSelectHistoryRecord,
            handleInputChange,
            searchHistoryRecord,
            bindValues
        };
    }
});
</script>

<style scoped lang="less">
.dropdown-body {
    max-width: 100%;
    max-height: 758px;
    box-shadow: 0 4px 8px -2px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding-top: 12px;
    .item {
        position: relative;
        display: block;
        min-height: 32px;
        padding: 5px 12px;
        color: #000000d9;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        cursor: pointer;
        transition: background 0.3s ease;
        &:hover {
            background: #f5f5f5 !important;
        }
    }

    .clear-text {
        color: @primary-color;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>